<template>
  <div class="app-cinema-list">
    <div class="nav-wrap">
      <div class="item">
        全城
        <i class="fa fa-angle-down"></i>
      </div>
      <div class="item">
        品牌
        <i class="fa fa-angle-down"></i>
      </div>
      <div class="item">
        特色
        <i class="fa fa-angle-down"></i>
      </div>
    </div>
    <div class="cinemaitem" v-if="cinemaList">
        <app-cinema-item
        v-for="cinemaItem in cinemaList"
        :key="cinemaItem.id"
        :cinemaItem="cinemaItem"
        ></app-cinema-item>
    </div>
  </div>
</template>

<script>
import AppCinemaItem from "@com/common/AppCinemaItem";
export default {
  data() {
    return {
      cinemaList: null
    };
  },
  components: {
    AppCinemaItem
  },
  created() {
    this.$ajax({
        method: "post",
        url: "/my/movie?forceUpdate=" + Date.now()
      })
        .then(res => {
          this.cinemaList = res.cinemas;
        })
        .catch(err => {
          console.log(err);
        });
    // this.$ajax
    //   .post("/my/movie?forceUpdate=" + Date.now())
    //   .then(result => {
    //     if (result.status === 200) {
    //       this.cinemaList = result.data.cinemas;
    //     }
    //   })
    //   .catch(err => {
    //     console.log(err);
    //   });
  }
};
</script>

<style lang="scss">
.app-cinema-list {
  .nav-wrap {
    height: 1.066667rem;
    z-index: 10;
    background-color: #fff;
    display: flex;
    border-bottom: 0.013333rem solid #b0b0b0;
    position: relative;

    .item {
      flex: 1;
      text-align: center;
      line-height: 1.066667rem;
      white-space: nowrap;
      overflow: hidden;
      font-size: .346667rem;
      text-overflow: ellipsis;
      position: relative;

      i {
        margin-left: 0.053333rem;
        border-top-color: #b0b0b0;
      }
    }

    div + div::before {
      content: "";
      display: block;
      position: absolute;
      height: 0.533333rem;
      width: 0.026667rem;
      top: 0.266667rem;
      left: 0;
      border-left: 1px solid #b0b0b0;
    }
  }

  .cinemaitem {
    height: auto; 
  }
}
</style>
